var p = new Promise(function (resolve) {
    var HelloMessage = React.createClass({
        componentWillMount() {
            var dom = ReactDOM.findDOMNode(this);
            console.log(dom); // null
        },
        componentDidMount() {
            // 只有在 mount 后才能获取到
            var dom = ReactDOM.findDOMNode(this);
            console.log(dom);
        },
        render() {
            return <div>Hello {this.props.name}</div>;
        }
    });
    ReactDOM.render(<HelloMessage name="React"/>, document.querySelector('#container1'), function () {
        resolve(1);
    });
});
p.then(function () {
    console.log('渲染完成');
});

/**
 * ReactDOM.render(ReactElement el, DOMElement container[, function callback]);
 * 把 react 元素 el 渲染到 DOM container 中, 如果已经渲染则更新. callback在 渲染/更新 完成后执行
 */

/**
 * ReactDOM.unmountComponentAtNode(DOMElement container)
 * 从 DOM 中移除已经挂载的 React 组件，清除相应的事件处理器和 state
 * 在 container 内没有组件挂载，这个函数将什么都不做. 组件成功移除，返回 true, 没有组件被移除，返回 false
 */
document.querySelector('.unmount').addEventListener('click', function () {
    console.log('unmountComponentAtNode => #container1');
    var success = ReactDOM.unmountComponentAtNode(document.querySelector('#container1'));
    console.log(success ? 'unmountComponent success' : 'unmountComponent fail');
}, false);


/**
 * ReactDOM.findDOMNode(ReactComponent component)
 * 获取到真实的DOM节点
 * 只在mounted组件中调用，mounted组件就是已经渲染在浏览器DOM结构中的组件。如果你在组件的render()方法中调用React.findDOMNode()就会抛出异常
 */


/**
 * ReactDOMServer.renderToString(ReactElement element)
 * 把组件渲染成原始的 HTML 字符串。该方法应该仅在服务器端使用
 */
var html1 = ReactDOMServer.renderToString(React.createElement('span', null, 'hello'));
// html1 标签中含有 react 自定义的一些属性
console.log('ReactDOMServer.renderToString', html1);


/**
 * ReactDOMServer.renderToStaticMarkup(ReactElement element)
 * 和 renderToString 类似，除了不创建额外的 DOM 属性，例如 data-react-id，因为这些属性仅在 React 内部使用
 * 如果用 React 做一个简单的静态页面生成器，这是很有用的，因为丢掉额外的属性能够节省很多字节。
 */
var html2 = ReactDOMServer.renderToStaticMarkup(React.createElement('span', null, 'hello'));
console.log('ReactDOMServer.renderToStaticMarkup', html2);
